<template>
  <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>设备管理</el-breadcrumb-item>
                <el-breadcrumb-item>维修信息</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row>
            <el-alert title="使用mqtt 前端使用mqtt.js" type="success"  :closable="false">
            </el-alert>
        </el-row>
  </div>
</template>
<script>
/**
 * 支持自动重连
 * 使用apache apollo 连接不稳定
 * 使用emq 连接稳定
 */
import mqtt from 'mqtt'
let client
export default {
  data(){
      return {
          memberInfo: {
              memberId: '',
              deptId: '',
              myDeptIdList: []
          }
      }
  },
  methods:{

    memberInit(){
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        console.log(userInfo)
        this.memberInfo.memberId = userInfo.memberId
        this.memberInfo.deptId = userInfo.deptId
        this.memberInfo.myDeptIdList = userInfo.myDeptIdList
    },
    onMessage(topic,payload,packet){
        console.log('message-topic',topic)
        console.log('message-payload',payload.toString())
        console.log('message-packet',packet)
    },

    init(){
        client = mqtt.connect('ws://172.16.15.232:8083/mqtt')
        client.options.username = 'abcd'
        client.options.password = '1234'
        client.options.protocolId = 'MQIsdp'
        client.options.protocolVersion = 3
        client.options.clean = true
        
        //sdk支持自动重连
        client.on('connect',()=>{
            console.log('连接成功')

            /** 
             * 订阅消息
             * 第二个参数options
             * {
             *  qos : 0,
             *  retain : false,
             *  dup : false
             * }
             */
            // let subOptions = {}
            // subOptions.qos = 0
            // subOptions.retain = false
            // subOptions.dup = false
            // client.subscribe('presence', subOptions,
            // //订阅的回调
            // (err,granted)=>{
            //     //订阅出错时
            //     console.log('subscribe-err',err)

            //     /**
            //      * 订阅成功时
            //      * granted是订阅主题的数组
            //      */
            //     console.log('subscribe-granted',granted)
            // })
        
            /**订阅所有下属部门 */
            let subOptions = {}
            subOptions.qos = 2
            this.memberInfo.myDeptIdList.map(id=>{
                let createDest = `/topic/dept/${id}/alarm/create`
                let handleDest = `/topic/dept/${id}/alarm/handle`
                //订阅所有产生报警和处理报警
                client.subscribe(createDest,subOptions)
                client.subscribe(handleDest,subOptions)
            })



            // /** 发布消息 */
            // client.publish('presence', 'Hello mqtt',
            // //发布消息的回调
            // (err,packet)=>{
            //     console.log('publish-err',err)

            //     console.log('publish-packet',packet)
            // })
        })

        /**接受消息 */
        // client.on('message',(topic,payload,packet)=>{
        //     console.log('message-topic',topic)
        //     console.log('message-payload',payload.toString())

        //     /**@argument
        //      * Packet {cmd: "publish", retain: false, qos: 0, dup: false, length: 43, …}
        //         cmd:"publish"   //命令
        //         dup:false       //是否重复
        //         length:43       //长度
        //         //内容的字节数组
        //         payload:Uint8Array(33) [230, 136, 145, 230, 152, 175, 231, 174, 161, 231, 144, 134, 230, 142, 167, 229, 136, 182, 229, 143, 176, 229, 143, 145, 231, 154, 132, 230, 182, 136, 230, 129, 175]
        //         qos:0               //qos级别
        //         retain:false        //是否保留    
        //         topic:"presence"    //消息来源topic
        //      */
        //     console.log('message-packet',packet)
        // })
        client.on('message',(topic,payload,packet)=>{
            this.onMessage(topic,payload,packet)
        })

        client.on('close',()=>{
            console.log('close')
        })

        client.on('offline',()=>{
            console.log('offline')
        })

        client.on('error',(Error)=>{
            console.log('error',Error)
        })
    }
  },
  mounted(){
      this.memberInit()
      this.init()
  },
  destroyed(){
      client.end()
      console.log('vue destroyed,关闭mqtt连接')
  }

}
</script>
<style scoped>

</style>